<template>
	<z-paging :auto="false" ref="paging" v-model="dataList" @query="queryList">
		<view class="container" @click="skip(`/pages/dotDetails/dotDetails`)">
			<view class="container_t">
				<image src="@/static/dotIntro/outlets_ton.png" mode="aspectFill"></image>
				<view class="container_t_c">
					<view class="container_t_c1 u-line-1">新悦香港茶餐厅笋岗街道梨园路8号HALO</view>
					<view class="container_t_c2">
						<image src="@/static/dotIntro/outlets_icon02.png" mode="aspectFill"></image>
						<view>周一至周日 00:00-00:00</view>
					</view>
					<view class="container_t_c3">
						<image src="@/static/dotIntro/outlets_icon01.png" mode="aspectFill"></image>
						<view class="u-line-1">笋岗街道梨园路8号HALO笋岗街道梨园路8号HALO</view>
					</view>
				</view>
				<view class="jl">4m</view>
			</view>
			<view class="line"></view>
			<view class="container_b">
				<view class="container_b_item">
					<image class="apple" src="@/static/dotIntro/outlets_icon03.png" mode="aspectFilla"></image>
					<view>有</view>
				</view>
				<view class="container_b_item">
					<image class="android" src="@/static/dotIntro/outlets_icon04.png" mode="aspectFilla"></image>
					<view>有</view>
				</view>
				<view class="container_b_item">
					<image class="type-c" src="@/static/dotIntro/outlets_icon05.png" mode="aspectFilla"></image>
					<view>有</view>
				</view>
				<view class="container_b_item">
					<image class="yes" src="@/static/dotIntro/outlets_icon06.png" mode="aspectFilla"></image>
					<view>可归还 卡槽充足</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad,
		onShow,
		onReady
	} from "@dcloudio/uni-app"
	
	let dataList = ref([])
	let paging = ref(null)
	const queryList = (page, pageSize) => {
	  // paging.value.complete(res.item);
	}
	
	function skip(url) {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}
	
	.container {
		width: 720rpx;
		height: 250rpx;
		border-radius: 20rpx;
		background: #ffffff;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
		margin: 0 auto;
		padding: 20rpx 30rpx;
		overflow: hidden;
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		
		.container_t {
			width: 100%;
			display: flex;
			
			image {
				width: 128rpx;
				height: 128rpx;
			}
			
			.container_t_c {
				width: 440rpx;
				display: flex;
				flex-direction: column;
				margin-left: 25rpx;
				
				.container_t_c1 {
					font-size: 15px;
					letter-spacing: 2px;
					color: #000000;
					font-weight: bold;
				}
				
				.container_t_c2 {
					display: flex;
					align-items: center;
					font-size: 10px;
					letter-spacing: 1px;
					color: #606060;
					margin-top: 15rpx;
					
					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 11rpx;
					}
				}
				
				.container_t_c3 {
					display: flex;
					align-items: center;
					font-size: 10px;
					letter-spacing: 1px;
					color: #606060;
					margin-top: 15rpx;
					
					image {
						width: 16rpx;
						height: 22rpx;
						margin-right: 13rpx;
						flex-shrink: 0;
					}
				}
			}
			
			.jl {
				font-size: 12px;
				letter-spacing: 1px;
				color: #000000;
				margin-left: auto;
			}
		}
		
		.line {
			width: 100%;
			height: 1rpx;
			background-color: #cbcbcb;
			margin-top: 38rpx;
		}
		
		.container_b {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 15rpx;
			justify-content: space-around;
			
			.container_b_item {
				display: flex;
				align-items: center;
				letter-spacing: 1px;
				color: #000000;
				font-size: 10px;
				
				.apple {
					width: 22rpx;
					height: 27rpx;
					margin-right: 5rpx;
				}
				
				.android {
					width: 22rpx;
					height: 25rpx;
					margin-right: 5rpx;
				}
				
				.type-c {
					width: 22rpx;
					height: 23rpx;
					margin-right: 5rpx;
				}
				
				.yes {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>